<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>
        h2{
            margin: 0;
        }
        .blocks{
            display: flex;
            flex-direction: column;
            width: 20rem;
            height: 6rem;
        }
        .blockout{
            display: flex;
            justify-content: space-between;
            margin: 1.5rem 0;
            padding: 0 1rem;
        }
        #auditType{
            display: inline-block;
            min-width: 6rem;
            height: 3rem;
            background-color: #EEF1F6;
            border-radius: 4px;
            color: black;
            text-align: center;
            line-height: 3rem;
        }
        input[type="text"]:disabled{
            background-color: #EEF1F6;
        }
        input[type="text"]{
            height: 3rem;
        }
    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <div class="layui-collapse" lay-filter="test">

                    <form id="form1" class="layui-form layui-form-pane" action="">
                        <div class="blockout">

                            <div class="blocks">
                                <label>PO编号</label>
                                <div class="layui-input-inline">
                                    <input type="text"
                                           class="layui-input"
                                            lay-verify="required"
                                            id="POcode"
                                            name="POcode"
                                            placeholder="PO编号"/>
                                </div>
                            </div>
                            <div class="blocks">
                                <label>仓库名称</label>
                                <div class="layui-input-inline">
                                    <!--<input type="text" class="layui-input" name="wareHouseName" id="wareHouseName" placeholder="仓库名称"/>-->
                                    <input th:value="${ckmc}"
                                           name="wareHouseName"
                                           id="wareHouseName"
                                           autocomplete="off"
                                           class="layui-input"
                                           readonly
                                           style="background-color: #EEF1F6;"/>
                                </div>
                            </div>
                            <div class="blocks">
                                <label>PO类型</label>
                                <div class="layui-input-inline">
                                    <select type="text"
                                            lay-filter="POtype"
                                            lay-verify="required"
                                            id="POtype"
                                            name="POtype"
                                            placeholder="PO类型">
                                    </select>
                                </div>
                            </div>
                            <div class="blocks">
                                <label>预计到货时间</label>
                                <div class="layui-input-inline">
                                    <input type="text"
                                           class="layui-input"
                                           lay-verify="required"
                                           id="planTime"
                                           name="planTime"
                                           placeholder="预计到货时间"/>
                                </div>
                            </div>
                            <div class="blocks">
                                <label>备注</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" name="remark" id="remark" placeholder="备注"/>
                                </div>
                            </div>
                        </div>
                        <div class="blockout">
                            <div class="blocks">
                                <label>供应商编号</label>
                                <div class="layui-input-inline">
                                    <span id="auditType"></span>
                                </div>
                                <span hidden id="zdsh" name="zdsh"></span>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">供应商</h2>
                            <div class="layui-colla-content layui-show">
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>供应商编号</label>
                                        <span id="supCode"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>供应商名称</label>
                                        <span id="supName"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>联系人</label>
                                        <span id="supMan"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>电话1</label>
                                        <span id="supPhone1"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>电话2</label>
                                        <span id="supPhone2"></span>
                                    </div>
                                </div>
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>传真</label>
                                        <span id="supFaxse"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>国家</label>
                                        <span id="supState"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>城市</label>
                                        <span id="supCity"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>省</label>
                                        <span id="supProvince"></span>
                                    </div>
                                    <div class="blocks">
                                        <label>邮编</label>
                                        <span id="supPostCode"></span>
                                    </div>
                                </div>
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>详细地址</label>
                                        <span id="supAddress"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin: 2rem 0;">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                            </div>
                        </div>
                        <input type="hidden" name="cjsj" id="cjsj"/>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>


    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;
        var GYSID;
        $(function () {
            var DATA;
            $.ajax({
                url: '/zxsdwms/wmsPurchaseOrder/getOrderAndDetail/'+ localStorage['id'],
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    DATA = data;
                }
            })
            // 查询供应商信息
            var SupplierInf;
            $.ajax({
                url: '/zxsdwms/wmsPurchaseOrder/getWmsOwnerSupplierByHzid',
                type: 'GET',
                dataType: 'json',
                contentType: "application/json",
                async: false,
                data: '',
            }).then((resolve) => {
                SupplierInf = resolve;
            });
            // 查询PO类型
            var poTypedata;
            $.ajax({
                url: '/zxsdwms/wmsPurchaseOrder/getPoLx',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({}),
                contentType: 'application/json',
                async: false,
            }).then((resolve) => {
                poTypedata = resolve;
                var optionInf = optionRendering(resolve, 'id', 'ddlx');
                // POtypeData = resolve;
                // 渲染Po类型的<option>
                console.log('optionInf', optionInf);
                $('#POtype').append(optionInf);
            })
            var ID;
            var item = DATA.WmsPurchaseOrder;
            for (var i = 0; i< poTypedata.length; i++) {
                if (poTypedata[i].ddlx === item.ddlx) {
                    ID = poTypedata[i].id;
                }
            }
            for (var i = 0; i < SupplierInf.length; i++) {
                if (SupplierInf[i].bh === item.bh) {
                    GYSID = SupplierInf[i].id;
                    break;
                }
            }
            console.log('IIIIIIIIII', ID);
            $('#POtype').val(ID);
            form.render('select');
            $('#POcode').val(item.bh);
            $('#remark').val(item.bz);
            $('#cjsj').val(item.cjsj);
            $('#planTime').val(item.yjdhsj);
            $('#auditType').text(item.gysbh);
            $('#supName').text(item.gysmc);
            $('#supCode').text(item.gysbh);
            $('#supMan').text(item.lxr);
            $('#supPhone1').text(item.dh1);
            $('#supPhone2').text(item.dh2);
            $('#supFaxse').text(item.cz);
            $('#supState').text(item.gj);
            $('#supCity').text(item.cs);
            $('#supProvince').text(item.sheng);
            $('#supPostCode').text(item.yb);
            $('#supAddress').text(item.xxdz);
        })

        // option渲染方法
        function optionRendering(data, value, text) {
            var optionInf = '<option value="">请选择</option>';
            data.forEach(function (item) {
                optionInf += '<option value="'+ item[value] +'">'+ item[text] +'</option>';
            })
            return optionInf;
        }

        form.on("submit(add)",function(data){
            var field = data.field;
            zzpUtils.confirm("是否确定修改",function(index){
                if (field) {
                    var data = {};
                    data.bh = field.POcode;
                    data.bz = field.remark;
                    data.cjsj = field.cjsj;
                    data.gysid = GYSID;
                    data.id = localStorage['id'];
                    data.lx = field.POtype;
                    var time = field.planTime;
                    time = new Date(time);
                    data.yjdhsj = time.getTime();
                    $.ajax({
                        url: '/zxsdwms/wmsPurchaseOrder/edit',
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        async: false,
                        success: function (data) {
                            layer.msg(data.message);
                            if (data.type === 'success') {
                                setTimeout(function(){
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                },500);
                            }
                        }
                    })
                }
            })
            return false;
        })

        laydate.render({
            elem: '#planTime'
            ,type: 'datetime'
        });
    });

</script>
</html>